<!DOCTYPE html>
]
}
},
template: `
<div>
    <h2 class="text-2xl font-bold mb-4 text-gray-800 flex items-center">
        <i class="fa fa-user text-blue-500 mr-2"></i>教师信息
    </h2>
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
        <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">教师ID</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">教授课程</th>
        </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
        <tr v-for="teacher in teachers" :key="teacher.id" class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ teacher.id }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ teacher.name }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ teacher.subject }}</td>
        </tr>
        </tbody>
    </table>
</div>
`
};
const Courses = {
data() {
return {
courses: [
{ id: 'C001', name: '数据结构', credit: 4, teacher: '周老师' },
{ id: 'C002', name: '操作系统', credit: 3, teacher: '吴老师' },
{ id: 'C003', name: '大学物理', credit: 5, teacher: '孙老师' },
{ id: 'C004', name: '线性代数', credit: 3, teacher: '孙老师' },
{ id: 'C005', name: '大学英语', credit: 4, teacher: '郑老师' }
]
}
},
template: `
<div>
    <h2 class="text-2xl font-bold mb-4 text-gray-800 flex items-center">
        <i class="fa fa-book text-blue-500 mr-2"></i>课程信息
    </h2>
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
        <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程ID</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程名称</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学分</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授课教师</th>
        </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
        <tr v-for="course in courses" :key="course.id" class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ course.id }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ course.name }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ course.credit }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ course.teacher }}</td>
        </tr>
        </tbody>
    </table>
</div>
`
};
// 2. 定义路由
const routes = [
{ path: '/', component: Home },
{ path: '/students', component: Students },
{ path: '/teachers', component: Teachers },
{ path: '/courses', component: Courses }
];
// 3. 创建路由实例并传递 `routes` 配置
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的缩写
linkExactActiveClass: 'bg-blue-600'
});
// 5. 创建并挂载根实例
const { createApp } = Vue;
const app = createApp({});
// 使用路由
app.use(router);
app.mount('#app');
